<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>本例测试修饰符：</p>
			<a href="http://www.baidu.com" v-on:click.prevent="clickMe1">你点击这个链接，但是不会发生跳转。</a>
			<br/>
			<a href="javascript:void(0);" @click.prevent="clickMe2">测试链接2，请查看Console</a>
			<br/>
			<a href="javascript:void(0);" @click.prevent="clickMe3(1, '哈哈哈')">测试链接3，请查看Console</a>
			<br/>
			<a href="http://www.baidu.com" @click.prevent="clickMe4(1, '哈哈哈', $event)">测试链接4，请查看Console</a>
			<div id="outer" style="background-color: aquamarine;" @click="clickMe6()">
				<span>这是外层的地盘</span>
				<div id="inner" style="background-color: #FF7F50;" @click.stop="clickMe5">
					<span>这是内层的地盘</span>
					<div @click="clickMe7()">里面还有一层</div>
				</div>
			</div>
		</div>
	</body>
<script type="text/javascript">
var app = new Vue({
	el: '#app',
	data: {
		clickMe1: function(){
			console.log("你点击了这个链接，但是prevent修饰符导致最后执行了event.preventDefault()，所以不会发生跳转。");
		},
		clickMe2: function(event){
			//作为相应方法，默认的会传入当前的原生DOM事件对象
			console.log(event);
		},
		clickMe3: function(p_int, p_str){
			console.log(p_int);
			console.log(p_str);
			console.log(event);  //event可以直接使用，但为了兼容性，依然还是建议显式传入
		},
		clickMe4: function(p_int, p_str, event){
			console.log(p_int);
			console.log(p_str);
			console.log(event);  //由于显式传入event，没有兼容性问题
		},
		clickMe5: function(){
			console.log("你点击了内层");
			console.log("由于使用了stop事件修饰符，所以停止冒泡，不会触发外层的click事件");
		},
		clickMe6: function(){
			console.log("你点击了外层");
		},
		clickMe7: function(){
			console.log("你点击了最内层");
			console.log("然后事件开始冒泡啦！~");
		},
	}
});
</script>
</html>
